<template>
  <div class="box" :style="{height:height}">
    <!-- <el-container>
      <el-aside>
        <el-tree
          ref="tree"
          class="filter-tree"
          :data="treeData"
          :props="defaultProps"
          default-expand-all
          :filter-node-method="filterNode"
          @current-change="getNowTree"
        >
          <span slot-scope="{ node, data }" class="custom-tree-node">
            <span>
              <img v-if="data.Seniority==2" src="@/assets/device/deviceDd.png">
              <img v-if="data.Seniority==3" src="@/assets/device/deviceInfo.png">
              {{ node.label }}
            </span>
          </span>
        </el-tree>
      </el-aside>
      <el-main>
        <navbar :children="true" />
        <component :is="moduleType" :chose-data="choseTreeItem" />
      </el-main>
    </el-container> -->
  </div>
</template>

<script>
// import { Navbar } from '@/layout/components'
// import electricityComparison from './electricityComparisonChild.vue'
// import powerRanking from './powerRankingChild.vue'
// import indexCorrelation from './indexCorrelationChild.vue'
// import powerQuality from './powerQualityChild.vue'
// import electricAnalysis from './electricAnalysisChild.vue'
// import carbonStatistics from './carbonStatisticsChild.vue'
export default {
  name: 'AppMain',
  components: {

  },
  props: {
    showModel: {
      type: Boolean,
      default: false },
    moduleType: {
      type: String,
      default: '' }

  },
  data() {
    return {
      cardName: {
        typeDelimit: '类型定义配置',
        deviceFile: '档案配置'
      },
      choseTreeItem: {},
      height: '0px',
      treeData: [{
        id: 1,
        label: '一级 1',
        Seniority: 1,
        children: [{
          id: 4,
          label: '二级 1-1',
          Seniority: 2,
          children: [{
            id: 9,
            label: '三级 1-1-1',
            Seniority: 3,
            children: [{
              id: 4,
              Seniority: 4,
              label: '四级 1-1'
            }]
          }, {
            id: 10,
            Seniority: 3,
            label: '三级 1-1-2'
          }]
        }]
      }, {
        id: 2,
        label: '一级 2',
        Seniority: 1,
        children: [{
          id: 5,
          Seniority: 2,
          label: '二级 2-1'
        }, {
          id: 6,
          Seniority: 2,
          label: '二级 2-2'
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  computed: {

  },

  watch: {
    $route(route) {
      // this.isPadding = this.$route.path === '/device/typeDelimit/child/index'
      // console.log('padding-----' + this.isPadding)
    }
  },
  mounted() {
    this.getHeight()
  },
  methods: {
    getHeight() {
      this.height = window.getComputedStyle(document.querySelector('.app-main')).height
      console.log(this.height)
    },
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    getNowTree() {
      console.log(arguments)
      this.choseTreeItem = arguments[0]
    }
  }

}
</script>

<style lang="scss" scoped>
.app-main {
  /* 50= navbar  50  */
  min-height: calc(100vh - 50px);
  width: 100%;
  position: relative;
  overflow: hidden;
  padding-top: 84px;
  box-sizing: border-box;
  /*border-left: 12px solid #F5F7FE;*/
}
.appMainPadding0{
  padding-top: 30px!important;
}
.fixed-header+.app-main {
  padding-top: 85px;
}

.hasTagsView {
  .app-main {
    /* 84 = navbar + tags-view = 50 + 34 */
    min-height: calc(100vh - 84px);
  }

  .fixed-header+.app-main {
    padding-top: 84px;
  }
}
</style>

<style lang="scss">
.el-container{
  height: 100%;
  width: 100%;
}
.box{
  box-sizing: border-box;
}
.el-aside{
  width: 12.8%!important;
}
.el-aside{
  background-color: #F8F8F8;
}
.el-tree{
  background-color: transparent;
}
</style>
